<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msapplication-window" content="width=device-width;height=device-height">
<title>商品详情</title>
<link rel="stylesheet" href="../css/common/jquery.mobile-1.4.5.min.css">
<link type="text/css" rel="stylesheet" charset="utf-8" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/common/unslider.css">
<link rel="stylesheet" href="../css/common/weui.min.css">
<link rel="stylesheet" href="../css/common/jquery-weui.min.css">
<link rel="stylesheet" href="../css/good.css">

<script src="../js/common/jquery-2.0.0.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../js/common/jquery.mobile-1.4.5.js"></script>
<script src="../js/common/velocity.min.js"></script>
<script src="../js/common/jquery.event.move.js"></script>
<script src="../js/common/jquery.event.swipe.js"></script>
<script src="../js/common/unslider-min.js"></script>
<script src="../js/common/yxMobileSlider.js"></script>
<script src="../js/ajax_req.js"></script>
<script src="../js/api.js"></script>

<script id="popup-arrow-script">
	$.mobile.document.on( "click", "#open-popupArrow", function( evt ) {
		//$( "#popupArrow" ).popup( "open" )
		$( "#popupArrow" ).popup( "open", { x: evt.pageX + 10, y: evt.pageY - 20 } );
		evt.preventDefault();
	});
</script>

<!--
	作者：wyy8@live.cn
	时间：2017-06-06
	描述：微信
-->
<script type="application/javascript" src="../js/common/jweixin-1.0.0.js"></script>
<script type="application/javascript" src="../js/common/jquery-weui.min.js"></script>
<script type="application/javascript" src="tmpl/comment.js"></script>
<script type="application/javascript" src="tmpl/color_select.js"></script>
		 
		 	
<!--模板-->
<script type="application/javascript" src="../plugins/jquery-tmpl/jquery.tmpl.js"></script>
<script type="application/javascript" src="../plugins/jquery-tmpl/jquery-jtemplates.js"></script>

</head>
<body>
	<div data-role="page" style="overflow: hidden;display: inline-block;">
	
		<div id="sds">
			<div class="slider">
			  <ul id="ul-slider">
			  </ul>
			</div>
		</div>
		
		<div class="maio_sha_title">
			<!--<span class="maio_sha_text">秒杀</span>-->
	    	<span class="goods_title"></span>
	    </div>
	    <div class="goods_description">
	    	
	    </div>
	    <div class="price_div">
	    	<span style='font-size: 1.7rem;float: left;color: red;'>¥ </span>
	    	<span class="price"></span>
	    	<span class="price_free"></span>
	    	
	    	<span id="product_lable"></span>
	    </div>
	    <div class="shou_cang">
	    	<span style="font-size: 1.1rem;">收藏: <span id="shou_cang_sc_num" style="font-size: 1.1rem;"></span></span>
	    	<span class="browser" style="font-size: 1.1rem;">浏览: <span id="shou_cang_ll_num" style="font-size: 1.1rem;"></span></span>
	    	<span class="xiao_liang" style="font-size: 1.1rem;">月销量: <span id="shou_cang_yxl_num" style="font-size: 1.1rem;"></span></span>
	    </div>
	    <div class="can_shu">
			<!--<ul data-role="listview">-->
				<div class="can_shu_div" onclick="openModal(1)" style="border-top: solid #f0f0f0 1px;">
					<a href="#" class="li-type">规格参数</a>
					<span class="can_shu_div_float_span">
						<img src="../image/more.png" style="width: 0.75rem;height: 1.34rem;">
					</span>
				</div>
				<div class="can_shu_div" onclick="openModal(2)">
					<a href="#" class="li-type">颜色分类</a>
						<span class="can_shu_div_float_span">
							<img src="../image/more.png" style="width: 0.75rem;height: 1.34rem;">
						</span>
						<span class="li-color-type"></span>
					</a>
				</div>
				<div class="can_shu_div" onclick="openModal(3)">
					<a href="#" class="li-type">领取优惠券</a>
					<span class="can_shu_div_float_span">
						<img src="../image/more.png" style="width: 0.75rem;height: 1.34rem;">
					</span>
				</div>
			<!--</ul>-->
		</div>
	    
	    <!--
        	作者：wyy8@live.cn
        	时间：2017-05-28
        	描述：评价下拉刷新
        -->
	    <div data-role="tabs" id="tabs">
		  	<div data-role="navbar" class="can_shu_div">
			    <ul>
			      <li class="ui-body-d ui-content" style="overflow: hidden;">
			      	<a href="#goods_detail_id" data-ajax="false" style="color:#ff5543">宝贝详情</a>
			      	<label class="good_detail_tab_lable"></label>
			      </li>
			      <li style="overflow: hidden;">
			      	<a href="#goods_evaluate_id" data-ajax="false">评价(<span id="goods_evaluate_list"></span>)</a>
			      	<label class="good_detail_tab_lable" style="display: none;"></label>
			      </li>
			    </ul>
		  	</div>
		  	<div class="navbar_content" data-role="tabs" id="goods_detail_id" style="display: block;margin-bottom: 63px;">
			    
			</div>
		  	<div data-role="tabs" id="goods_evaluate_id" style="display: none;overflow: hidden;margin-bottom: 63px;">
			    
			    
			    <div id="goods_evaluate_id_comment">
			    	
			    </div>
			    
		  	</div>
		</div>
		
		<!--
        	作者：wyy8@live.cn
        	时间：2017-05-28
        	描述：选择弹窗`
        -->
		<div class="modal bs-example-modal-lg" tabindex="1111" style="background:transparent;z-index: 1111;" role="dialog" aria-labelledby="myLargeModalLabel">
		  <div class="modal-dialog modal-lg" role="document" style="background:transparent;bottom: 0px;position: fixed;">
		    <div class="modal-content" style="background:transparent;">
			    <div class="modal-body" style="background:transparent;">
			    	<a id="box_close" style="display: none;" href="" class="modal-content-close" data-dismiss="modal">
			    		<img src="../image/close.png" style="width: 2.17rem;margin-top: 0.3rem;">
			    	</a>
			    	
			    	<div class="weui-mask" id="iosMask" style="opacity: 0; display: none;"></div>
			        <div class="box weui-actionsheet" id="box">
						
					</div> 
			    </div>
		    </div>
		  </div>
		</div>
	</div>
	
	<div class="home_zixun">
		<div class="home_zixun_qq">
			<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=284060596&site=qq&menu=yes">
   				<img border="0" src="http://wpa.qq.com/pa?p=2:284060596:41" alt="点击这里给我发消息" title="点击这里给我发消息"/>
   			</a> 
		</div>
		<div class="home_zixun_tel">13810224125</div>
	</div>
	
	<div data-role="footer" data-position="fixed" class="foot-div">
        <div class="liji_goumai" onclick="buy()">
        	立即购买
        </div>
        <div onclick="addShoppingCart()" class="liji_goumai" style="background: #FF9C28;">
        	加入鱼篓
        </div>
        
        <div class="gouwuche_content" onclick="oncarItemList()">
        	<span class="gouwuche_icon"><img src="../image/gouwuche@2x.png" width="20px">
        		<span class="badge"></span>
        	</span>
        	<a href="#" data-icon="shop">我的鱼篓</a>
        	
        </div>
        
        <div class="gouwuche_content" onclick="addCollection()">
        	<span class="gouwuche_icon"><img id="img_shoucang" src="../image/duobianxing@2x.png" width="20px"></span>
        	<a href="#" data-icon="star">收藏</a>
        </div>
        
        <div class="gouwuche_content" onclick="zixun_click()">
        	<span class="gouwuche_icon"><img src="../image/zixun@2x.png" width="20px"></span>
        	<a href="#">咨询</a>
        </div>
        
   </div>

	<script>
		var product_id = 0;
		var image_flag = "0"
		var product = {}
		var sku = {}
		var select_sku = false
		
		//alert(window.screen.height - 300 + 60)
		//$(".modal").css('margin-top',window.screen.height - 300)
		
		$("#tabs ul>li>a").click(function(event){
			$( event.target ).css( {color:"#ff5543",border:"none","text-shadow":"none","box-shadow":"none"} );
			$( event.target ).siblings().show();
			$( event.target ).parent().siblings().find("a").css({color:"black"});
			$( event.target ).parent().siblings().find("label").hide();
		});
		
	   $('#shoppingcart').click(function(){
           $('#box').animate({'bottom':'0'},300);
           $('#modal-backdrop').addClass("modal-backdrop");
        });
	  
	    $('#popup_color_fenlei').click(function(){
	        $('#box').animate({'bottom':'-100%'},300) ;
	        $('#modal-backdrop').removeClass("modal-backdrop");
	    });
	    
	    console.log(getQueryString("id"))
	    var id = parseInt(getQueryString("id"))
	    ajax(api.productDetails,{product_id:id},function(data){
	    	product = data;
	    	//设置价格后面标签
	    	if(data.product.lable != null){
	    		var lable = data.product.lable.split(",")
	    		console.log(lable)
	    		$("#product_lable").setTemplateURL('tmpl/lable.html');
				$("#product_lable").processTemplate(lable);
	    	}
	    	$(document).attr("title",data.product.name);//修改title值
	    	//价格
			$(".goods_title").html(data.product.name)
			$(".goods_description").html(data.product.description)
			if(data.product.market_price != null && data.product.market_price != data.product.price){
				$(".price").append(data.product.price + "-"+data.product.market_price)
			}
			$(".price_free").html("¥"+data.product.market_price)
			//收藏
			if(data.collectionNum==null){
				data.collectionNum = 0
			}
			if(data.browseNum==null){
				data.browseNum = 0
			}
			if(data.orderNum==null){
				data.orderNum = 0
			}
			$("#shou_cang_sc_num").html(data.collectionNum)
			$("#shou_cang_ll_num").html(data.browseNum)
			$("#shou_cang_yxl_num").html(data.orderNum)
			
			//收藏图标颜色
			if(data.is_collection == 1){
				is_collection(1)
			}
			//banner
			if(data.product.product_image_lst_store != null){
				var list_img = data.product.product_image_lst_store.split(",")
				for(var i=0;i<list_img.length;i++){
					$(".slider ul").append("<li><img onclick='slider_view(\""+list_img[i]+"\",\""+data.product.product_image_lst_store+"\")' onload=\"img_onload(this)\" src=\""+list_img[i]+"\"></li>")
				}
				$(".slider").yxMobileSlider({width:window.screen.width,during:3000,height:window.screen.width*245/375})
			}
			
			// 商品详情
			$("#goods_detail_id").html(data.product.meta_description)
			$("#goods_detail_id").css('display','block')
			$("#goods_evaluate_id").css('display','none')
			//评论
			if(data.commentNum == null){
				$("#goods_evaluate_list").html("0")
			}else{
				$("#goods_evaluate_list").html(data.commentNum)
			}
			
			ajax_get_comments(data.product.id, 0)
			//购物车图标更改
			gouwuche_changed()
	    });
	    
	    function image_comment_click(image_flag){
	    	//有图无图点击
			/*$(".goods_evaluate_button button").removeClass("button_select")
			$(".goods_evaluate_button button").addClass("button_unselect")
			$(this).removeClass("button_unselect")
			$(this).addClass("button_select")*/
			
			//var image_flag = $(this).attr("data-href")
			// 获取评论
			ajax_get_comments(product.product.id, image_flag)
	    }
	    
	    function zixun_click(){
	    	$(".home_zixun").toggle()
	    }
	    
	    //购物车图标更改
	    function gouwuche_changed(){
			ajax(api.getCartItemNum, {}, function(data){
				if(data != null && data.num != null && data.num != 0){
					if(data.num>99){
						//$(".badge").text("99+")
					}else if(data.num>9){
						//$(".badge").text(data.num)
					}else{
						//$(".badge").text(data.num)
					}
					$(".badge").css("display","block")
				}else{
					$(".badge").css("display","none")
				}
			})
	    }
	    
	    function is_collection(is_collection){
	    	if(is_collection == 1){
	    		$("#img_shoucang").attr("src","../image/shoucang2.png")
	    	}else{
	    		$("#img_shoucang").attr("src","../image/duobianxing@2x.png")
	    	}
	    }
	    
	    //加载评论
	    function loadmore(){
	    	loadDownFn()
	    }
	    
	    //弹窗（1.规格、2.颜色、3.优惠券、4.咨询）
	    function openModal(type, images, src){
	    	//1.规格
	    	if(type == 1){
	    		$(".modal-dialog").css("height",400)
	    		$("#box").css("height",400)
	    		
	    		$("#box").setTemplateURL('tmpl/spec_select.html');
				$("#box").processTemplate(product.shopProductAttributes);
				$('.bs-example-modal-lg').modal('show')
	    	}
	    	// 加载颜色弹窗2.颜色
	    	if(type == 2){
	    		/*select_sku = false;*/
	    		ajax(api.listSku,{product_id:product.product.id,is_seckill:0},function(data){
	    			if(data.length <= 0) return;
	    			var color_items = {
	    				list : data,
	    				product: product.product,
	    				cnt:1
	    			}
	    			var index = 0
	    			if(sku != null && sku.index != null){
	    				index = sku.index
	    			}
	    			sku = color_items
	    			sku.index = index
	    			$(".modal-dialog").css("height",460)
	    			$("#box").css("height",460)
	    		
		    		$("#box").setTemplateURL('tmpl/color_select.html');
		    		$("#box").setParam("width", window.screen.width); 
					$("#box").processTemplate(color_items);
					$('.bs-example-modal-lg').modal('show')
	    		})
	    	}
	    	//3.优惠券
	    	if(type == 3){
    			$(".modal-dialog").css("height",400)
	    		$("#box").css("height",400)
    		
	    		$("#box").setTemplateURL('tmpl/exchange_select.html');
	    		$("#box").setParam("width", window.screen.width); 
				$("#box").processTemplate(product.coupons);
				$('.bs-example-modal-lg').modal('show')
	    	}
	    	//4.咨询
	    	if(type == 4){
    			$(".modal-dialog").css("height",230)
	    		$("#box").css("height",230)
    		
	    		$("#box").setTemplateURL('tmpl/zixun_select.html');
				$("#box").processTemplate(product.coupons);
				$('.bs-example-modal-lg').modal('show')
	    	}
	    }
	    //获取评论
	    function ajax_get_comments(product_id, image_flag){
	    	product_id = product_id;
	    	var para = {}
	    	if(image_flag == null || image_flag == "0"){
	    		para = {product_id:product_id}
	    	}else{
	    		para = {product_id:product_id,is_image:image_flag}
	    	}
	    	//评论下拉刷新控件
		    $('#goods_evaluate_id_comment').load("comm/loadmore.html", function(data){
				loaded(60, {url:api.productComment, page:'tmpl/comment.html', para:para})
			});
	    }
	    
	    //收藏
	    function addCollection(){
	    	
	    	ajax(api.collection,{product_id: product.product.id},function(data){
	    		is_collection(data.is_collection)
	    		if(data.is_collection == 1){
	    			toast("收藏成功！")
	    		}else{
	    			toast("取消成功！")
	    		}
	    	})
	    }
	    
	    //加入购物车
	    function addShoppingCart(){
	    	login(window.location.href)
	    	if(select_sku){
	    		//判断商品是否下架
	    		expOrder(product.product.id, sku.list[sku.index].id, function(){
		    		ajax(api.carItemAddProduct,{sku_id: sku.list[sku.index].id,quantity:sku.cnt,product_id:sku.list[sku.index].product_id},function(data){
			    		toast("加入鱼篓成功")
			    		//购物车图标更改
						gouwuche_changed()
			    	})
		    	})
	    	}else{
	    		openModal(2)
	    		return
	    	}
	    }
	    
	    //图片放大
	    function slider_view(src, list){
	    	if(list != null && src != null){
    			var arr = list.split(',')
	    		wx.previewImage({
                     current:src,
                     urls:arr
                });
    		}
	    }
	    
	    //立即购买
	    function buy(){
	    	login(window.location.href)
	    	if(select_sku != true){
	    		openModal(2)
	    		return
	    	}
	    	//判断商品是否下架
	    	expOrder(product.product.id, sku.list[sku.index].id, function(){
	    		var str = sku.list[sku.index].product_id+"-"+sku.list[sku.index].id+"-"+sku.cnt
	    		window.location.href="confrimOrder.html?sku="+str
	    	})
	    }
	    //兑换优惠券
	    function onExchangeClick(id){
	    	login(window.location.href)
	    	ajax(api.exchange, {id:id}, function(data){
				toast("领取成功！")
	    	})
	    }
	    
	    //购物车列表
	    function oncarItemList(){
	    	login("myShoppingCart.html")
	    	window.location.href="myShoppingCart.html"
	    }
	    
	    //图片加载
	    function img_onload(obj){
			obj.width=window.screen.width
		}
	    
	    $('.bs-example-modal-lg').on('hidden.bs.modal', function (event) {
	    	$("#fixed_div").remove()
	    	$("#box").removeClass('weui-actionsheet_toggle');
            $("#iosMask").fadeOut(200);
            $("#box_close").css("display","none")
	    })
	    $('.bs-example-modal-lg').on('hide.bs.modal', function (event) {
	    	$("body").css('position','absolute')
	    	$(document).scrollTop(scrollTop)
	    })
	    var scrollTop = 0
	    $('.bs-example-modal-lg').on('shown.bs.modal', function (event) {
	    	
	    	$("#box").addClass('weui-actionsheet_toggle');
            $("#iosMask").fadeIn(200);
	    	scrollTop = $(document).scrollTop()
	    	$("body").css('position','fixed')
	    	setTimeout(function(){
	    		$("#box_close").css("display","block")
	    	},300)
	    })
	    
	    $('.bs-example-modal-lg').on('show.bs.modal', function (event) {
	    	$("body").append("<div id='fixed_div' class='fixed_div'></div>")
	    })
	    
	</script>
</body>
</html>